import React,{useEffect} from 'react'
import {Tabs} from 'antd-mobile'
import UserList from "./UserList/UserList";
import GroupList from "./GroupList/GroupList";
import {connect} from "react-redux";
import {actionGetFriend} from "../../../../redux/actions/friend";
import {IStore} from "../../../../redux/store";

const tabs = [
    { title: (<div>好友</div>) },
    { title: (<div>群组</div>) },
];

interface IProps {
    friendList: Array<any>;
    actionGetFriend: (uUid: string) => void
}
const UserOrGroup = (props: IProps) => {
    useEffect(() => {
        const uUid = sessionStorage.getItem('uUid')
        if(uUid){
            props.actionGetFriend(uUid)
        }
    },[])// eslint-disable-line react-hooks/exhaustive-deps
    return (
        <div>
            <Tabs tabs={tabs}
                  initialPage={0}
            >
                <div style={{backgroundColor: '#fff' }}>
                    <UserList />
                </div>
                <div style={{backgroundColor: '#fff'  }}>
                    <GroupList />
                </div>
            </Tabs>
        </div>
    )
}

export default connect(
    (state: IStore) => ({friendList: state.friendList}),
    {
        actionGetFriend
    }
)(UserOrGroup)